<app-input field="clientId" [change]="service" [orig]="original">
  <mat-form-field class="textInput">
    <mat-placeholder i18n-placeholder="services.form.label.oidcClientId">
      {{ messages.services_form_label_oidcClientId }}
    </mat-placeholder>
    <input matInput required [(ngModel)]="service.clientId">
    <mat-hint align="end">
      <app-hint></app-hint>
    </mat-hint>
  </mat-form-field>
  <mat-icon appHelp
            i18n-matTooltip="services.form.tooltip.oidcClientId"
            [matTooltip]="messages.services_form_tooltip_oidcClientId">
  </mat-icon>
</app-input>

<app-input field="clientSecret" [change]="service" [orig]="original">
  <mat-form-field class="textInput">
    <mat-placeholder i18n-placeholder="services.form.label.oidcClientSecret">
      {{ messages.services_form_label_oidcClientSecret }}
    </mat-placeholder>
    <input matInput required [type]="showOAuthSecret ? 'text' : 'password'"
           [(ngModel)]="service.clientSecret">
    <mat-hint align="end">
      <app-hint></app-hint>
    </mat-hint>
  </mat-form-field>
  <mat-icon appHelp
            i18n-matTooltip="services.form.tooltip.oidcClientSecret"
            [matTooltip]="messages.services_form_tooltip_oidcClientSecret">
  </mat-icon>
</app-input>

<div>
  <mat-checkbox [(ngModel)]="showOAuthSecret">
    <ng-container i18n="services.form.label.oidcShowSecret">
      {{ messages.services_form_label_oidcShowSecret }}
    </ng-container>
    <mat-icon style="font-size: medium"
              i18n-matTooltip="services.form.tooltip.oidcShowSecret"
              [matTooltip]="messages.services_form_tooltip_oidcShowSecret">help
    </mat-icon>
  </mat-checkbox>
</div>

<app-input field="bypassApprovalPrompt" [change]="service" [orig]="original">
  <mat-checkbox [(ngModel)]="service.bypassApprovalPrompt">
    <ng-container i18n="services.form.label.oidcBypass">
      {{ messages.services_form_label_oidcBypass }}
    </ng-container>
    <mat-icon appHelp
              i18n-matTooltip="services.form.tooltip.oidcBypass"
              [matTooltip]="messages.services_form_tooltip_oidcBypass">
    </mat-icon>
    <mat-hint align="end">
      <app-hint></app-hint>
    </mat-hint>
  </mat-checkbox>
</app-input>

<app-input field="generateRefreshToken" [change]="service" [orig]="original">
  <mat-checkbox [(ngModel)]="service.generateRefreshToken">
    <ng-container i18n="services.form.label.oidcRefreshToken">
      {{ messages.services_form_label_oidcRefreshToken }}
    </ng-container>
    <mat-icon appHelp
              i18n-matTooltip="services.form.tooltip.oidcRefreshToken"
              [matTooltip]="messages.services_form_tooltip_oidcRefreshToken">
    </mat-icon>
    <mat-hint align="end">
      <app-hint></app-hint>
    </mat-hint>
  </mat-checkbox>
</app-input>

<app-input field="jsonFormat" [change]="service" [orig]="original" style="padding-bottom:10px;">
  <mat-checkbox [(ngModel)]="service.jsonFormat">
    <ng-container i18n="services.form.label.oidcJsonFormat">
      {{ messages.services_form_label_oidcJsonFormat }}
    </ng-container>
    <mat-icon appHelp
              i18n-matTooltip="services.form.tooltip.oidcJsonFormat"
              [matTooltip]="messages.services_form_tooltip_oidcJsonFormat">
    </mat-icon>
    <mat-hint align="end">
      <app-hint></app-hint>
    </mat-hint>
  </mat-checkbox>
</app-input>

<app-input field="jwks" [change]="service" [orig]="service">
  <mat-form-field class="textInput">
    <mat-placeholder i18n-placeholder="services.form.label.oidc.jwks">
      {{ messages.services_form_label_oidc_jwks }}
    </mat-placeholder>
    <input matInput required [(ngModel)]="service.jwks">
    <mat-hint align="end">
      <app-hint></app-hint>
    </mat-hint>
  </mat-form-field>
  <mat-icon appHelp
            i18n-matTooltip="services.form.tooltip.oidc.jwks"
            [matTooltip]="messages.services_form_tooltip_oidc_jwks">
  </mat-icon>
</app-input>

<ng-container *ngIf="service.scopes.indexOf('user_defined') > -1">
  <app-input field="scopes_userdefined" [change]="service" [orig]="original">
    <mat-form-field class="textInput">
      <mat-placeholder i18n-placeholder="services.form.label.oidc.user.defined.scopes">
        {{ messages.services_form_label_oidc_user_defined_scopes }}
      </mat-placeholder>
      <input matInput [(ngModel)]="service.scopes_userdefined"/>
    </mat-form-field>
    <mat-hint align="end">
      <app-hint></app-hint>
    </mat-hint>
    <mat-icon appHelp
              i18n-matTooltip="services.form.tooltip.oidc.user.defined.scopes"
              [matTooltip]="messages.services_form_tooltip_oidc_user_defined_scopes">
    </mat-icon>
  </app-input>
</ng-container>

<app-input field="signIdToken" [change]="service" [orig]="original">
  <mat-checkbox [(ngModel)]="service.signIdToken">
    <ng-container i18n="services.form.label.oidc.signToken">
      {{ messages.services_form_label_oidc_signToken }}
    </ng-container>
    <mat-icon appHelp
              i18n-matTooltip="services.form.tooltip.oidc.signToken"
              [matTooltip]="messages.services_form_tooltip_oidc_signToken">
    </mat-icon>
    <mat-hint align="end">
      <app-hint></app-hint>
    </mat-hint>
  </mat-checkbox>
</app-input>

<app-input field="implicit" [change]="service" [orig]="original">
  <mat-checkbox [(ngModel)]="service.implicit">
    <ng-container i18n="services.form.label.oidc.implicit">
      {{ messages.services_form_label_oidc_implicit }}
    </ng-container>
    <mat-icon appHelp
              i18n-matTooltip="services.form.tooltip.oidc.implicit"
              [matTooltip]="messages.services_form_tooltip_oidc_implicit">
    </mat-icon>
    <mat-hint align="end">
      <app-hint></app-hint>
    </mat-hint>
  </mat-checkbox>
</app-input>

<app-input field="encryptIdToken" [change]="service" [orig]="original" style="padding-bottom: 10px;">
  <mat-checkbox [(ngModel)]="service.encryptIdToken">
    <ng-container i18n="services.form.label.oidc.encrypt">
      {{ messages.services_form_label_oidc_encrypt }}
    </ng-container>
    <mat-icon appHelp
              i18n-matTooltip="services.form.tooltip.oidc.encrypt"
              [matTooltip]="messages.services_form_tooltip_oidc_encrypt">
    </mat-icon>
    <mat-hint align="end">
      <app-hint></app-hint>
    </mat-hint>
  </mat-checkbox>
</app-input>

<app-input field="idTokenEncryptionAlg" [change]="service" [orig]="original">
  <mat-form-field class="textInput">
    <mat-placeholder i18n-placeholder="services.form.label.oidc.encryptAlg">
      {{ messages.services_form_label_oidc_encryptAlg }}
    </mat-placeholder>
    <input matInput required [matAutocomplete]="encryptAlgAuto"
           [(ngModel)]="service.idTokenEncryptionAlg">
    <mat-hint align="end">
      <app-hint></app-hint>
    </mat-hint>
  </mat-form-field>
  <mat-icon appHelp
            i18n-matTooltip="services.form.tooltip.oidc.encryptAlg"
            [matTooltip]="messages.services_form_tooltip_oidc_encryptAlg">
  </mat-icon>
  <mat-autocomplete #encryptAlgAuto="matAutocomplete">
    <mat-option *ngFor="let opt of data.formData.encryptAlgOptions" [value]="opt">{{ opt }}</mat-option>
  </mat-autocomplete>
</app-input>

<app-input field="idTokenEncryptionEncoding" [change]="service" [orig]="original">
  <mat-form-field class="textInput">
    <mat-placeholder i18n-placeholder="ervices.form.label.oidc.encryptEnc">
      {{ messages.services_form_label_oidc_encryptEnc }}
    </mat-placeholder>
    <input matInput required [matAutocomplete]="encodingAlgAuto"
           [(ngModel)]="service.idTokenEncryptionEncoding">
    <mat-hint align="end">
      <app-hint></app-hint>
    </mat-hint>
  </mat-form-field>
  <mat-icon appHelp
            i18n-matTooltip="services.form.tooltip.oidc.encryptEnc"
            [matTooltip]="messages.services_form_tooltip_oidc_encryptEnc">
  </mat-icon>
  <mat-autocomplete #encodingAlgAuto="matAutocomplete">
    <mat-option *ngFor="let opt of data.formData.encodingAlgOptions" [value]="opt">{{ opt }}</mat-option>
  </mat-autocomplete>
</app-input>

<app-input field="subjectType" [change]="service" [orig]="original">
  <mat-form-field class="textInput">
    <mat-placeholder i18n-placeholder="services.form.label.oidc.subject.type">
      {{ messages.services_form_label_oidc_subject_type }}
    </mat-placeholder>
    <mat-select [(ngModel)]="service.subjectType">
      <mat-option *ngFor="let opt of data.formData.oidcSubjectTypes" [value]="opt">{{ opt }}</mat-option>
    </mat-select>
    <mat-hint align="end">
      <app-hint></app-hint>
    </mat-hint>
  </mat-form-field>
  <mat-icon appHelp
            i18n-matTooltip="services.form.tooltip.oidc.subject.type"
            [matTooltip]="messages.services_form_tooltip_oidc_subject_type">
  </mat-icon>
</app-input>

<ng-container *ngIf="service.subjectType === 'PAIRWISE'">
  <app-input field="sectorIdentifierUri" [change]="service" [orig]="original">
    <mat-form-field class="textInput">
      <mat-placeholder i18n-placeholder="services.form.label.oidc.sector.identifier.uri">
        {{ messages.services_form_label_oidc_sector_identifier_uri }}
      </mat-placeholder>
      <input matInput [(ngModel)]="service.sectorIdentifierUri">
      <mat-hint align="end">
        <app-hint></app-hint>
      </mat-hint>
    </mat-form-field>
    <mat-icon appHelp
              i18n-matTooltip="services.form.tooltip.oidc.sector.identifier.uri"
              [matTooltip]="messages.services_form_tooltip_oidc_sector_identifier_uri">
    </mat-icon>
  </app-input>
</ng-container>

<ng-container *ngIf="service.dynamicallyRegistered">
  <app-input field="dynamicRegistrationDateTime" [change]="service" [orig]="original">
    <mat-form-field class="textInput">
      <mat-placeholder i18n-placeholder="services.form.label.oidc.dynamicDate">
        {{ messages.services_form_label_oidc_dynamicDate }}
      </mat-placeholder>
      <input matInput [(ngModel)]="service.dynamicRegistrationDateTime">
      <mat-hint align="end">
        <app-hint></app-hint>
      </mat-hint>
    </mat-form-field>
    <mat-icon appHelp
              i18n-matTooltip="services.form.tooltip.oidc.dynamicDate"
              [matTooltip]="messages.services_form_tooltip_oidc_dynamicDate">
    </mat-icon>
  </app-input>
</ng-container>

